<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>

    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{login.tile.tip}"></title>
    <script th:inline="javascript">
        $(function () {
            $("#login-sumbit-btn-id").click(function (event) {
                const flag = $("input.form-control").verification();
                if (!flag) {
                    return
                }
                $("#login-form-id").submit();
            });


            $("#login-register-id").click(function (event) {
                message("register success!");
            });
        });//ready

        // 跳转到注册页面
        function registry() {
            window.location.href = "/registry";
        }

    </script>

    <style>
        html,
        body,
        #app{
            height: 100%;
        }
        #app{
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            /*align-items: center;*/
            /*justify-content: center;*/
        }
        .login{
            width: 300px;
            /*height: 230px;*/
            border: 1px solid #999999;
            padding: 10px;
        }

        .login-head{
            flex-basis: 50px;
            display: flex;
            flex-direction: row;
        }
        .head-img{
            flex-grow: 1;
        }
        .head-lang{
            flex-basis: 200px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .login-contents{
            flex-grow: 1;
            display: flex;
            flex-direction: row;
        }
        .contents-img{
            flex-grow: 1;
        }
        .contents-form{
            flex-basis: 500px;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            align-items: center;
            padding-top: 50px;
        }
        .tool{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>

<body style="display: flex;flex-direction: column">
<div id="app">
    <div class="login-head">
        <div class="head-img">
            <img th:src="@{/assets/images/logo_zh.png}" th:if="${session.siteLanguage} eq 'zh'" alt="" src="">
            <img th:src="@{/assets/images/logo_en.png}" th:if="${session.siteLanguage} eq 'en'" alt="" src="">
        </div>
        <div class="head-lang">
            <a th:href="@{/login/login(siteLanguage=en)}" th:text="#{login.english}"></a>
            <a th:href="@{/login/login(siteLanguage=zh)}" style="padding-left:10px" th:text="#{login.chinese}"></a>
        </div>

    </div>
    <div class="login-contents">
        <div class="contents-img">
            <img th:src="@{/assets/images/pic.png}">
        </div>
        <div class="contents-form">
            <form id="login-form-id" class="login" th:action="@{/login/verification}" method="post">
                <div class="form-group">
                    <span th:text="#{login.username}"></span>
                    <input class="form-control" type="text" name="username" pattern="^[a-zA-Z0-9]+$">
                </div>
                <div class="form-group">
              <span  th:text="#{login.password}">

              </span>
<!--                    <input  class="form-control" type="password" name="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$">-->
                    <input  class="form-control" type="password" name="password" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$">
                </div>
                <div class="form-group">
                    <a id="login-sumbit-btn-id"  class="form-control btn btn-success" th:text="#{login.submit}"> </a>
                </div>
                <div class="form-group tool">
                    <a class="btn" th:text="#{login.forget}"></a>
                    <a class="btn" th:text="#{login.register}" onclick="registry()"></a>
                </div>
            </form>
        </div>



    </div>


</div>
</body>
</html>